<template>
  <div>
    <header>
      <div class="fanhui" @click="back()">
        <img src="../../assets/返回.png" alt="">
        <span>返回</span>
      </div>
      <div class="title">
        <span>选择康护人员</span>
      </div>
      <div></div>
    </header>
    <div class="search">
      <van-search
        v-model="search"
        shape="round"
        placeholder="请输入康护人员姓名"
        left-icon=""
        show-action
      >
        <template #left-icon>
          <div @click="huliSearch">
            <van-icon name="search" />
          </div>
        </template>
        <template #action>
          <div style="" @click="huliSearch" class="sousuo">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="menu" >
      <van-dropdown-menu active-color="#1DA4F4" >
        <van-dropdown-item :title="shijianTitle" v-model="shijianid" @change="onchange(0)" :options="option1" />
        <van-dropdown-item :title="gradeTitle" v-model="gradeid" @change="onchange(1)" :options="option2" />
        <van-dropdown-item :title="sexTitle" v-model="sex" @change="onchange(2)" :options="option3" />
        <van-dropdown-item :title="hospitalTitle" v-model="grade" @change="onchange(3)" :options="option4" />
      </van-dropdown-menu>
    </div>
    <div class="content">
      <div v-if="loading === true" class="loading">
        <van-loading  size="24px" type="spinner" color="#1DA4F2" >加载中...</van-loading>
      </div>
      <ul v-else v-for="(item, index) in hulishiList"
          @click="selectBox($event, item.STAFF_ID, index, item.STAFF_NAME)" class="boxList" id="" :key="index">
        <li class="hulishiTop">
          <div class="hulishiImg">
            <img v-show="item.SEX === 2" src="../../assets/女医生@2x.png" alt="">
            <img v-show="item.SEX === 1" src="../../assets/男医生@2x.png" alt="">
          </div>
          <div class="hulishiTopRight">
            <p class="name">
              <label>{{item.STAFF_NAME}}</label>
              <button>{{item.GRADE_NAME}}</button>
              <span><van-icon class="star" name="star" color="#F9D739" /></span>
            </p>
            <p class="workTime">工作年限{{item.YEAR}}年</p>
          </div>
        </li>
        <li class="hulishiBottom">
          <div class="goodAt"><span>擅长: {{item.Goodat}}</span></div>
        </li>
      </ul>
    </div>
    <div class="btnList">
      <button class="complete" @click="complete()">完成</button>
      <button class="cancel" @click="cancel()">取消</button>
    </div>
  </div>
</template>

<script>
// import videoHttp from '../http/video.http'
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'KangHu',
  data () {
    return {
      loading: true, // 护理师加载判断
      userid: '',
      id: '',
      search: '', // 搜索框
      hulishiList: [],
      shijianid: '', // 工作年限
      gradeid: '', // 职业等级
      sex: '', // 性别
      grade: '', // 所在医院等级
      shijianTitle: '工作年限',
      gradeTitle: '职业等级',
      sexTitle: '性别',
      hospitalTitle: '医院等级',
      option1: [
        { text: '不限', value: '' },
        { text: '1年', value: 1 },
        { text: '2年', value: 2 },
        { text: '3年', value: 3 },
        { text: '4年', value: 4 },
        { text: '5年', value: 5 },
        { text: '5年以上', value: 6 }
      ],
      option2: [
        { text: '不限', value: '' },
        { text: '初级', value: 1 },
        { text: '中级', value: 2 },
        { text: '高级', value: 3 },
        { text: '特级', value: 4 }
      ],
      option3: [
        { text: '不限', value: '' },
        { text: '男', value: 1 },
        { text: '女', value: 2 }
      ],
      option4: [],
      staff_id: '',
      staff_name: '',
      item_id: ''
    }
  },
  mounted () {
    // 截取网址后的userid
    this.userid = this.$utils.getUrlKey('userid')
    this.id = this.$utils.getUrlKey('id')
    this.item_id = this.$utils.getUrlKey('item_id')
    this.getHulishi(this.item_id)
    this.getYiYuan()
    $('.content').css('height', $(window).height() - $('.content').offset().top - $('.btnList').height() + 'px')
  },
  methods: {
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    getYiYuan () {
      // http://jmx-kfdj.com/kfhl/minihospital/findHosptialGrade
      // axios.post('http://jmx-kfdj.com/kfhl/minihospital/findHosptialGrade')
      this.$http.findHosptialGrade()
        .then(res => {
          console.log(res)
          for (var i = 0; i < res.data.data.length; i++) {
            var obj = {
              text: '不限', value: ''
            }
            var add = {
              text: res.data.data[i].GRADE, value: res.data.data[i].GRADE_ID
            }
            this.option4[0] = obj
            this.option4.push(add)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取护理师
    getHulishi (item) {
      //   axios.post('http://jmx-kfdj.com/kfhl/miniitem/getServers?search=' + search +
      //     '&grade_id=' + gradeid + '&shijianid=' + shijianid + '&sex=' + sex + '&grade=' + grade)
      this.$http.getServers({search: this.search, grade_id: this.gradeid, shijianid: this.shijianid, sex: this.sex, grade: this.grade, item_id: item})
        /*
        * search
        * grade_id
        * shijianid
        * */
        .then(res => {
          console.log(res)
          this.hulishiList = res.data
          this.loading = false
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 搜索框
    huliSearch () {
      this.getHulishi(this.item_id)
    },
    // 筛选框变化
    onchange (index) {
      this.getHulishi(this.item_id)
      if (index === 0) {
        var shijianid = this.shijianid
        var shijianData = this.option2.filter(function (item) {
          return item.value === shijianid
        })
        this.shijianTitle = shijianData.text
      } else if (index === 1) {
        var gradeid = this.gradeid
        var gradeidData = this.option2.filter(function (item) {
          return item.value === gradeid
        })
        this.gradeTitle = gradeidData.text
      } else if (index === 2) {
        var sex = this.sex
        var sexData = this.option3.filter(function (item) {
          return item.value === sex
        })
        this.sexTitle = sexData.text
      } else if (index === 3) {
        var hospital = this.grade
        var hosData = this.option4.filter(function (item) {
          return item.value === hospital
        })
        this.hospitalTitle = hosData.text
      }
    },
    // 点击选择的人
    selectBox (e, staffId, index, staffName) {
      // 当被选中时id 为 select
      if (e.currentTarget.id === 'select') {
        $('.boxList').eq(index).attr('id', '')
        this.staff_id = ''
        this.staff_name = ''
      } else {
        $('.boxList').eq(index).attr('id', 'select').siblings().attr('id', '')
        this.staff_name = staffName
        this.staff_id = staffId
      }
    },
    // 确定按钮
    complete () {
      if ($('#select').length > 0) {
        sessionStorage.setItem('STAFF_ID', this.staff_id)
        sessionStorage.setItem('STAFF_NAME', this.staff_name)
        window.history.go(-1)
      } else {
        Toast('请选择康护人员')
      }
    },
    // 取消按钮
    cancel () {
      sessionStorage.removeItem('STAFF_ID')
      sessionStorage.removeItem('STAFF_NAME')
      window.history.go(-1)
    }
  }
}
</script>

<style scoped>
 *{
   margin: 0;
   padding: 0;
 }
  header{
    width: 100%;
    height: 12vw;
    display: flex;
    border-bottom: 1px solid #E5E5E5;
  }
  header div{
    width: 33%;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
 .fanhui{
   color: #1da4f2;
 }
 .fanhui img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .title{
    justify-content: center;
  }
 .loading {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .menu{
   /*position: sticky;*/
   /*top: 0;*/
   background: #FFFFFF;
   z-index: 99999;
   box-sizing: border-box;
 }
 /deep/ .van-dropdown-menu__bar{
   overflow: auto;
   background-color: rgba(29, 164, 242, 0.1);
   box-shadow: none;
 }
 /deep/ .van-ellipsis{
   font-family: PingFang SC;
   font-weight: bold;
   font-size: 15px;
 }
 .search {
   width: 100%;
   display: flex;
   justify-content: center;
   padding: 2vw 0;
 }
 /*搜索*/
 /deep/ .van-search{
   width: 92%;
 }
 /deep/ .van-field__control{
   padding-left: 10px;
   font-family: PingFang SC;
   font-weight: bold;
   font-size: 15px;
 }
 /deep/ .van-icon-search::before {
   content: '\F0AF';
   padding-left: 10px;
 }
 .sousuo{
   margin-left: 10px;
   color: #1DA4F2;
   font-size: 15px;
   font-family: PingFang SC;
   font-weight: bold;
 }
 .content {
   width: 100%;
   overflow: auto;
   background: #FAF9FE;
   box-sizing: border-box;
 }
 .content ul{
   width: 100%;
   height: 110px;
   background: #fff;
   display: flex;
   flex-wrap: wrap;
   flex-direction: row-reverse;
   margin-bottom: 1vw;
 }
 .content ul li{
   display: flex;
 }
 .hulishiImg{
   width: 23%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .hulishiImg img{
   width: 60px;
   height: 60px;
   box-sizing: border-box;
   /*margin: 0 10px 0 15px;*/
 }
 .hulishiTop{
   width: 100%;
   height: 75px;
   display: flex;
   align-items: center;
 }
 .hulishiTopRight{
   width: 77%;
 }
 .hulishiBottom {
   width: 77%;
   margin-bottom: 12px;
 }
 .name{
   margin-bottom: 5px;
   display: flex;
   align-items: center;
 }
 .name span{
   color: #F9D739;
   display: flex;
   align-items: center;
 }
 .name span .star{
   margin-right: 3px;
 }
 .name label{
   display: block;
   width: 80px;
   font-size: 16px;
 }
 .name button{
   width: 44px;
   height: 18px;
   line-height: 18px;
   background: rgba(29, 164, 242, 0.1);
   border-radius: 9px;
   border: none;
   font-size: 12px;
   color: #1DA4F2;
   margin: 0 9px 0 15px;
 }
 .workTime{
   font-size: 15px;
 }
 .goodAt {
   width:80%;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   word-break: break-all;
   color: #999999;
   font-size: 15px;
 }
  #select{
    background: rgba(29, 164, 242, 0.1) !important;
    /*opacity: 0.6;*/
  }
  .btnList{
    width: 100%;
    height: 60px;
    background: #FFFFFF;
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .btnList button{
    width: 40%;
    height: 44px;
    border-radius: 22px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .complete{
    border: 2px solid #1DA4F2;
    background: #1DA4F2;
    color: #fff;
  }
  .cancel{
    border: 2px solid #1DA4F2;
    background: #fff;
    color: #1da4f2;
  }
 /deep/ .van-dropdown-menu__title::after{
   border-color: transparent transparent #333 #333;
 }
</style>
